<template>
  <div :class="prefixCls">
    <a-row :class="`${prefixCls}-top`">
      <a-col :span="9" :class="`${prefixCls}-col`">
        <a-row>
          <a-col :span="8">
            <div :class="`${prefixCls}-top__avatar`">
              <img width="70" :src="user.avatar || headerImg" />
              <span style="font-size: 1.2rem;font-weight: bold;">{{ user.name }}</span>
              <div>{{ user.memo }}</div>
            </div>
          </a-col>
          <a-col :span="16">
            <div :class="`${prefixCls}-top__detail`">
              <h3>账号：{{ user.username }}</h3>
              <h3>年龄：{{ user.age }}</h3>
              <h3>性别：{{ user.gender }}</h3>
              <h3>邮件：{{ user.email }}</h3>
              <!-- <p>电话：{{ user.phone }}</p> -->
            </div>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="7" :class="`${prefixCls}-col`">
        <CollapseContainer title="拥有的角色" :canExpan="false">
          <template v-for="role in user.roles" :key="role.ID">
            <Tag class="mb-2" color="orange">
              {{ role.name }}
            </Tag>
          </template>
        </CollapseContainer>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
  import { Tag } from 'ant-design-vue';
import { computed, ref } from 'vue';
import { CollapseContainer } from '/@/components/Container/index';

  import headerImg from '/@/assets/images/header.jpg';
import { useUserStore } from '/@/store/modules/user';

const prefixCls = ref('account-center')

const userStore = useUserStore();
const user = computed(() => userStore.getUserInfo);

</script>
<style lang="less" scoped>
  .account-center {
    height: 80%;
    &-col:not(:last-child) {
      padding: 0 10px;

      &:not(:last-child) {
        border-right: 1px dashed rgb(206 206 206 / 50%);
      }
    }

    &-top {
      padding: 10px;
      margin: 16px 16px 12px;
      background-color: @component-background;
      border-radius: 3px;
      height: 100%;

      &__avatar {
        text-align: center;
        margin: 16px 0;

        img {
          margin: auto;
          border-radius: 50%;
        }

        span {
          margin: 10px 0;
          display: block;
          font-size: 20px;
          font-weight: 500;
        }

        div {
          margin-top: 3px;
          font-size: 12px;
        }
      }

      &__detail {
        padding-left: 20px;
        margin-top: 25px;
      }

      &__team {
        &-item {
          display: inline-block;
          padding: 4px 24px;
        }

        span {
          margin-left: 3px;
        }
      }
    }
  }
</style>
